<script setup lang="ts">
// const { href, width = 20, height = 20, color = "black" } = defineProps<{
//   href: string,
//   width?: number | string
//   height?: number | string
//   color?: string
// }>()

defineProps({
  href: {
    type: String,
    required: true
  },
  width: {
    type: [String, Number],
    default: 20,
    /* 自定义验证 返回值为否的情况控制台报警告 */
    validator(value: string | number) {
      if (typeof value == 'string') {
        const regex = /^[0-9]+(px)?$/i
        /*
          判断字符串是否合法（例如：20px）
        */
        return regex.test(value) || !isNaN(Number(value))
      } else {
        return value > 0
      }
    }
  },
  height: {
    type: [String, Number],
    default: 20,
    validator(value: string | number) {
      if (typeof value == 'string') {
        const regex = /^[0-9]+(px)?$/i
        return regex.test(value) || !isNaN(Number(value))
      } else {
        return value > 0
      }
    }
  },
  color: {
    type: String,
    default: "black"
  }
})

</script>

<template>
  <svg :style="{ width, height }">
    <use :xlink:href="'#icon-' + href" :fill="color"></use>
  </svg>
</template>

<style scoped></style>
